<template>
    <div class="activity-wrapper">
      <div class="head-wrapper">
        <div v-for="(title,index) in titles"
             :key="index" class="title"
             @click="titleChange(index)">
          <div class="name" :class="{'active':num===index}">{{title}}</div>
        </div>
      </div>
      <div class="content-wrapper">
        <div v-for="activity in data" :key="activity.id"  class="content-list" @click="showDetail">
          <div class="subject-wrapper">
            <div class="active-img">
              <img :src="activity.img">
            </div>
            <div class="active-title">{{activity.title}}</div>
            <div class="active-describe">{{activity.describe}}</div>
          </div>
        </div>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'activity',
    components: {
    },
    data () {
      return {
        titles: '',
        num: 0,
        data: []
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {
        this.$api.get('static/data.json', null, response => {
          this.titles = response.data.titleList
        })
        this.$api.get('static/data.json', null, response => {
          this.data = response.data.content1
        })
      },
      titleChange (index) {
        this.num = index
        if (index === 0) {
          this.$api.get('static/data.json', null, response => {
            this.data = response.data.content1
          })
        } else if (index === 1) {
          this.$api.get('static/data.json', null, response => {
            this.data = response.data.content2
          })
        } else {
          this.$api.get('static/data.json', null, response => {
            this.data = response.data.content1
          })
        }
      },
      showDetail () {
        this.$router.push({name: 'detail'})
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
@import "home-activity.styl"
</style>
